<!--
名称: 表格菜单组件
作者: huangdi_cd
日期: 2021/4/15
说明: 用于快速统一构建弹窗页面
-->
<template>
    <div>
        <el-table
            ref="multipleTable"
            :data="tableData"
            class="customer-table"
            tooltip-effect="dark"
            :height="height"
            :row-style="{border: 'none'}"
            :cell-style="{padding: '0'}"
            highlight-current-row
            @row-click="getCurRowInfo"
            :show-header="false" >
            <el-table-column :width="width">
                <p style="margin-top: 15px" slot-scope="scope"> <i class="el-icon-paperclip"></i>  {{ scope.row.name }}</p>
            </el-table-column>
            <el-table-column width="95px" v-if="delExit" :delExit="delExit">
                <template slot-scope="scope">
                    <i style="margin-left: 70px" class=" el-icon-delete"
                       size="mini" type="danger" @click="dels(scope.row, scope.$index)">
                    </i>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: 'ATableMenu',
        props: {
            height: {
                type: String,
                default: window.innerHeight - 130
            },
            width: {
                type: String,
                default: '100px'
            },
            tableData: {
                type: Array
            },
            delExit: {
                type: Boolean,
                default () {
                    return true
                }
            }
        },
        data () {
            return {
            }
        },
        methods: {
            // 删除的方法 --> 只删除前端不删除后端
            dels (row, i) {
                this.tableData.splice(i, 1)
                this.$emit('delRow', row)
            },
            // 行点击事件 --> 需要请求需要在父组件里面实现方法
            getCurRowInfo (row) {
                this.$emit('getCurRowInfo', row)
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
.el-container
    .el-aside
    .el-main
        width 100%
        height 100%
/* 用来设置当前页面element全局table 选中某行时的背景色*/
.el-table__body tr.current-row>td{
    background-color: rgba(90, 154, 160, 0.15) !important;
    color: #f04959;   /* 设置文字颜色，可以选择不设置 */

    /* 去掉表格单元格边框*/
    .customer-table th{
        border:none;
    }
    .customer-table td,.customer-table th.is-leaf {
        border:none;
    }
    /*表格最外边框*/
    .el-table--border, .el-table--group{
        border: none;
    }
    /* 头部边框*/
    .customer-table thead tr th.is-leaf{
        border: 1px solid #EBEEF5;
        border-right: none;
    }
    .customer-table thead tr th:nth-last-of-type(2){
        border-right: 1px solid #EBEEF5;
    }
    /*表格最外层边框-底部边框*/
    .el-table--border::after, .el-table--group::after{
        width: 0;
    }
    .customer-table::before{
        width: 0;
    }
    .customer-table .el-table__fixed-right::before,.el-table__fixed::before{
        width: 0;
    }
    /*表格有滚动时表格头边框*/
    .el-table--border th.gutter:last-of-type {
        border: 1px solid #EBEEF5;
        border-left: none;
    }
}

</style>
